import React from 'react';
import webviews from '../webviews.js';
import IconButton from '@mui/material/IconButton';
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import Typography from '@mui/material/Typography';
import Toolbar from '@mui/material/Toolbar';
import TextField  from '@mui/material/TextField';
import MyHidden from '../../MyHidden';
import * as store from '../../reducers/partsSlice';
export default class Findinpage extends React.Component {
  constructor(props) {
    super();
    this.state = { value: '', activeTab: null };
    this.ref_input_find = React.createRef();
  }
  componentDidUpdate(prevP, prevS) {
    if (!prevP.state.show_find && this.props.state.show_find) {
      this.start();
    }
  }
  start = (options) => {
    console.log('start----');

    this.props.dispatch(store.partsSlice.actions.SHOW_DROP(true));

    webviews.releaseFocus();
    let activeTab = this.props.state.tabs[this.props.state.tab_value].id

    // if (PDFViewer.isPDFViewer(Findinpage.activeTab)) {
    //   PDFViewer.startFindInPage(Findinpage.activeTab);
    // }
    this.ref_input_find.current.focus();
    this.ref_input_find.current.select();

    if (this.ref_input_find.current.value) {
      webviews.callAsync(
        activeTab,
        'findInPage',
        this.ref_input_find.current.value
      );
    }
  };
  end = (options) => {
    // TabBar.show();
    // this.setState({ hidden: true });
    options = options || {};
    var action = options.action || 'keepSelection';
    let activeTab = this.props.state.tabs[this.props.state.tab_value].id
    if (activeTab) {
      webviews.callAsync(activeTab, 'stopFindInPage', action);
      webviews.callAsync(activeTab, 'focus');
    }
  };
  render() {
    // console.log("--------------Findinpage render-------------------------")
    // console.log(this.state);
    return (
      <MyHidden
        title="find"
        on_hidden={() => {
          this.end();
          this.props.dispatch(store.actions.SHOW_FIND(false));
        }}
        hidden={!this.props.state.show_find}
      >
        <Toolbar>
          <TextField
            ref={this.ref_input_find}
            onChange={(e) => {
              this.setState({ value: e.target.value });
              if (e.target.value) {
                webviews.callAsync(
                  this.props.state.tabs[this.props.state.tab_value].id,
                  'findInPage',
                  e.target.value
                );
              }
            }}
            onKeyPress={(e) => {
              if (e.charCode === 13) {
                // Return/Enter key
                webviews.callAsync(this.props.state.tabs[this.props.state.tab_value].id, 'findInPage', [
                  this.state.value,
                  {
                    forward: !e.shiftKey, // find previous if Shift is pressed
                    findNext: true,
                  },
                ]);
              }
            }}
            onClick={() => {
              webviews.releaseFocus();
            }}
            placeholder={l('searchInPage')}
            id="findinpage-input"
            className="mousetrap"
          />
          <Typography id="findinpage-count">
            {this.props.state.count}
          </Typography>
          <IconButton
            onClick={() => {
              webviews.callAsync(this.props.state.tabs[this.props.state.tab_value].id, 'findInPage', [
                this.state.value,
                {
                  forward: false,
                  findNext: true,
                },
              ]);
              this.ref_input_find.current.focus();
            }}
            id="findinpage-previous-match"
          >
            <NavigateBeforeIcon />
          </IconButton>
          <IconButton
            onClick={() => {
              webviews.callAsync(this.props.state.tabs[this.props.state.tab_value].id, 'findInPage', [
                this.state.value,
                {
                  forward: true,
                  findNext: true,
                },
              ]);
              this.ref_input_find.current.focus();
            }}
            id="findinpage-next-match"
          >
            <NavigateNextIcon />
          </IconButton>
        </Toolbar>
      </MyHidden>
    );
  }
}
